<template>
  <div>
    <h-box header="通用积分规则">
      <el-form label-width="10em" label-position="left" class="hui-form-data">
        <el-form-item label="积分获得比例:">
          <template v-if="general.costMoneyUnit === 0 || general.increaseBonus === 0">消费不送积分</template>
          <template v-else>消费每满 <b class="hui-color-primary">{{ general.costMoneyUnit / 100 | currency('', 2) }}</b> 元，赠送 <b class="hui-color-primary">{{ general.increaseBonus }}</b> 积分</template>
        </el-form-item>
        <el-form-item label="每次获得数量限制:">
          <template v-if="general.maxIncreaseBonus === 0">不限</template>
          <template v-else>每次最多 <b class="hui-color-primary">{{ general.maxIncreaseBonus }}</b> 积分</template>
        </el-form-item>
        <el-form-item label="每天获得数量限制:">
          <template v-if="general.maxIncreaseBonusDaily === 0">不限</template>
          <template v-else>一个客户每天最多 <b class="hui-color-primary">{{ general.maxIncreaseBonusDaily }}</b> 积分</template>
        </el-form-item>
        <el-form-item label="积分保护期:">
          <template v-if="general.locked === 0">无保护期，获得后立即可用</template>
          <template v-else>获得后进入 <b class="hui-color-primary">{{ general.locked }} 天</b> 保护期，保护期内，积分无法使用</template>
        </el-form-item>
        <el-form-item label="积分有效期:">
          <template v-if="general.expiry === 0">永不过期</template>
          <template v-else>获得之日 至 <b class="hui-color-primary">{{ general.expiry === 1 ? '明年' : general.expiry === 2 ? '后年' : general.expiry }}</b> 的 12月31日</template>
        </el-form-item>
        <el-form-item label="积分抵扣:">
          <template v-if="general.costBonusUnit === 0 || general.reduceMoney === 0">积分不可抵扣消费金额</template>
          <template v-else>每使用 <b class="hui-color-primary">{{ general.costBonusUnit }}</b> 积分，抵扣 <b class="hui-color-primary">{{ general.reduceMoney / 100 | currency('', 2) }}</b> 元</template>
        </el-form-item>
        <el-form-item label="抵扣订单:">
          <template v-if="general.leastMoneyToUseBonus === 0">所有订金额均可抵扣</template>
          <template v-else>订单金额满 <b class="hui-color-primary">{{ general.leastMoneyToUseBonus / 100 | currency('', 2) }}</b> 元可抵扣</template>
        </el-form-item>
        <el-form-item label="每单限用:">
          <template v-if="general.maxReduceBonus === 0">不限</template>
          <template v-else>单笔最多使用 <b class="hui-color-primary">{{ general.maxReduceBonus }}</b> 积分</template>
        </el-form-item>
        <el-form-item class="hui-mt-1">
          <el-button @click="handleEditGeneral" type="primary" size="medium" icon="el-icon-setting">设置规则</el-button>
        </el-form-item>
      </el-form>
    </h-box>

    <h-box header="自定义积分规则" v-if="false">
      <el-button type="primary" size="medium" icon="el-icon-plus">新建自定义积分规则</el-button>
      <el-table :data="custom.list" stripe class="hui-mt-1">
        <el-table-column label="名称 / 状态">
          <template slot-scope="scope">
            <div>{{ scope.row.title }}</div>
            <div>
              <el-tag v-if="scope.row.status === 0" size="small">未开始</el-tag>
              <el-tag v-else-if="scope.row.status === 1" type="success" size="small">进行中</el-tag>
              <el-tag v-else-if="scope.row.status === 2" type="info" size="small">已结束</el-tag>
              <el-tag v-else-if="scope.row.status === 3" type="danger" size="small">已下线</el-tag>
              <el-tag v-else type="danger" size="small">{{ scope.row.status }}</el-tag>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="规则内容" prop="regulation"></el-table-column>
        <el-table-column label="赠送积分" prop="bonus"></el-table-column>
        <el-table-column label="最后操作人">
          <template slot-scope="scope">
            <div>{{ scope.row.updateUser }}</div>
            <div>{{ $moment.unix(scope.row.updateTime).format("YYYY-MM-DD HH:mm:ss") }}</div>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="handleEditCustom(scope.row)" :disabled="scope.row.status === 2 || scope.row.status === 3" type="primary" size="mini" plain>编辑</el-button>
            <el-button @click="handleDeleteCustom(scope.row)" :disabled="scope.row.status === 2 || scope.row.status === 3" type="danger" size="mini" plain>下线</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!--分页，start-->
      <el-pagination @current-change="handleCurrentChange" :current-page.sync="custom.pages" :page-sizes="[10]" :page-size="10" layout="total, sizes, prev, pager, next" :total="custom.total" background class="hui-mt-2"></el-pagination>
      <!--分页，end-->
    </h-box>
  </div>
</template>

<script>
export default {
  data () {
    return {
      general: {
        costMoneyUnit: 0,
        increaseBonus: 0,
        maxIncreaseBonus: 0,
        maxIncreaseBonusDaily: 0,
        locked: 0,
        expiry: 0,
        costBonusUnit: 0,
        reduceMoney: 0,
        leastMoneyToUseBonus: 0,
        maxReduceBonus: 0
      },
      custom: {
        total: 0,
        pages: 0,
        list: []
      }
    }
  },
  created () {
    this.getGeneral()
    this.getCustom()
  },
  methods: {
    // 获取通用积分规则
    getGeneral () {
      let tmp = {
        costMoneyUnit: 100,
        increaseBonus: 1,
        maxIncreaseBonus: 500,
        maxIncreaseBonusDaily: 1500,
        locked: 1,
        expiry: 1,
        costBonusUnit: 100,
        reduceMoney: 100,
        leastMoneyToUseBonus: 5000,
        maxReduceBonus: 1000
      }
      this.general = tmp
    },

    // 获取自定义积分规则
    getCustom () {
      let pages = this.custom.pages
      let total = 20
      let list = []
      let i = 10
      while (i > 0) {
        let _startTime = (val) => {
          return parseInt(this.$moment().day(val).set({'hour': 0, 'minute': 0, 'second': 0}).format('X'))
        }
        let _endTime = (val) => {
          return parseInt(this.$moment().day(val).set({'hour': 23, 'minute': 59, 'second': 59}).format('X'))
        }
        let _status = (min, max) => {
          min = Math.ceil(min)
          max = Math.floor(max)
          return Math.floor(Math.random() * (max - min + 1)) + min
        }
        let _updateTime = () => {
          return parseInt(this.$moment().format('X'))
        }
        list.push({
          id: i,
          title: '规则名称' + i,
          startTime: _startTime(1),
          endTime: _endTime(1 + i),
          status: _status(0, 3),
          updateUser: '黄倬, 13262268525',
          updateTime: _updateTime(),
          regulation: '规则内容',
          bonus: 200
        })
        i--
      }
      this.custom.list = list
      this.custom.total = total
      this.custom.pages = pages + 1
    },

    handleEditGeneral () {
      this.$router.push({
        path: 'general'
      })
    },

    // 分页事件
    handleCurrentChange () {
      console.log(this.custom.pages)
      this.$loading()
      setTimeout(() => {
        this.$loading().close()
      }, 500)
    },

    // 编辑事件
    handleEditCustom (row) {
      let id = row.id
      this.$router.push({
        path: 'custom',
        query: {
          type: 'edit',
          id: id
        }
      })
    },

    // 删除事件
    handleDeleteCustom (row) {
      this.$confirm('确认下线这个自定义积分规则么？下线后，本规则将立即结束。', '下线确认', {
        confirmButtonText: '下线',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log('下线, 规则ID:' + row.id)
        this.$message({
          type: 'success',
          message: '规则已下线!'
        })
      }).catch(() => {})
    }
  }
}
</script>

<style lang="less">

</style>
